<template>
  <div>
    <el-row>
      <el-col :span="11" class="info">
        <div style="height: 70px; display: flex;align-items: center;justify-content: center;">
          <img :src="`${$store.state.user.uheader}`" class="header">
          <div class="phone__name">
            <p class="name">{{ $store.state.user.uname }}</p>
            <p class="phone">{{ $store.state.user.uphone }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="11" class="balance">
        <div style="height: 70px; display: flex;align-items: center;justify-content: center;">
          <div>
            <p style="font-size: 18px;">用户余额</p>
            <p style="font-size: 16px;color: red">{{ $store.state.user.ubanlance }}￥</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="margin: 10px 10px">
      <span class="recenter">我的已支付订单</span><br>
      <el-table
          :data="orderList"
          height="250"
          style="width: 100%">
        <el-table-column
            label="电影名"
            width="180">
          <template slot-scope="scope">
           《{{scope.row.movie.mname}}》
          </template>
        </el-table-column>
        <el-table-column
            label="日期">
          <template slot-scope="scope">
            {{scope.row.buyTime}}
          </template>
        </el-table-column>
        <el-table-column
            label="数量">
          <template slot-scope="scope">
            {{scope.row.amount}}张
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="付款金额">
          <template slot-scope="scope">
            {{scope.row.total}}元
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button size="mini" @click="showQrCode(scope.row)">
              查看取票码
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="取票码"
        :visible.sync="qrCodeVisible"
        width="25%">
      <div style="text-align: center">
        <img :src = "qrCode" alt=""/>
      </div>
      <div style="text-align: center">
        <span>
          订单编码: {{number}}
        </span>
      </div>
      <div style="text-align: center;margin-top: 2%">
        <span>
          温馨提示: 请于电影放映前15分钟(<span style="color: red">{{endTime}}前</span>)取票
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="downloadQrCode">下 载</el-button>
    <el-button type="primary" size="mini" @click="qrCodeVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "ShowCenter",
  props:['orderList'],
  data() {
    return {
      qrCode: null,
      qrCodeVisible:false,
      number:null,
      endTime:null
    }
  },
  methods: {
    showQrCode(row){
      this.qrCodeVisible = true
      this.qrCode = row.qrCode
      this.number = row.number
      this.endTime = row.endTime
    },
    downloadQrCode(){
      // 将 base64 转为 Blob
      const byteCharacters = atob(this.qrCode.split(',')[1]);
      const byteArrays = [];

      for (let offset = 0; offset < byteCharacters.length; offset++) {
        const byteArray = new Uint8Array(1);
        byteArray[0] = byteCharacters.charCodeAt(offset);
        byteArrays.push(byteArray);
      }
      const blob = new Blob(byteArrays, { type: 'image/png' });
      // 创建下载链接
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `订单${this.number}.png`; // 设置下载文件名
      link.click();
      // 释放 URL 对象
      URL.revokeObjectURL(link.href);
    }
  }
}
</script>

<style scoped>

.balance, .info {
  text-align: center;
  margin: 16px 6px;
}

.el-row {
  border-bottom: 2px solid #E5E5E5;
}

.header {
  width: 65px;
  height: 65px;
  display: inline-block;
  border-radius: 50%;
}

.phone__name {
  display: inline-block;
  text-align: left;
  margin-left: 10px;
}

.name {
  font-size: 20px;
}

.phone {
  color: #B8B4B4;
}

p {
  margin: 5px 0px;
}

.recenter {
  font-size: 18px;
  font-weight: 600;
  margin-left: 40px;
}
/deep/.el-table__cell{
  text-align: center;
}

</style>